<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var all=document.getElementById("all");//DOM对象
            var tb=document.getElementById("tb");
            var inputs=tb.getElementsByTagName("input");//在元素内部获取所有的input集合

            //给全选按钮绑定事件
            all.onchange=function(){//给全选按钮绑定事件
                if(all.checked){//全选按钮被选中
                   for(var i=0;i<inputs.length;i++){
                        inputs[i].checked=true;
                   }

                }else{//全选按钮未被选中
                    for(var i=0;i<inputs.length;i++){
                        inputs[i].checked=false;
                    }
                }
            };


            //为tbody中的每一个input绑定事件
            for(var i=0;i<inputs.length;i++){
                
                inputs[i].onchange=function(){
                   var count=0;
                   //从头到尾查找多少个input被勾选中
                   for(var j=0;j<inputs.length;j++){
                        if(inputs[j].checked){
                            count++;
                        }
                   }
                   
                   if(count==inputs.length){//个数和总的个数相等
                        all.checked=true;
                   }else{
                       all.checked=false;
                   }

                };
            }




        };




        function doSelect(){
            var all=document.getElementById("all");//DOM对象
            var tb=document.getElementById("tb");
            var inputs=tb.getElementsByTagName("input");
            var count=0;
            for(var i=0;i<inputs.length;i++){
                if(inputs[i].checked){
                    count++;
                }
            }
            if(count==inputs.length){
                all.checked=true;
            }else{
                all.checked=false;
            }
        }
    </script>
</head>
<body>
    <table border="1" width="500">
        <thead>
            <tr>
                <th><input type="checkbox" id="all" >全选</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
            </tr>
        </thead>
        <tbody align="center" id="tb">
            <tr>
                <td><input type="checkbox" id="box1" ></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="box2"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="box3"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="box4" ></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
        </tbody>
    </table>
</body>
</html>